<template>
  <view class="main">
    <!-- header -->
    <view class="header_nav">
      <view class="header_left">
        <image src="../../static/nft_search.png"></image>
        <text style="margin-right: 20rpx;">我的藏品</text>
        <text>{{ total }}</text>
      </view>
      <view class="header_right" @click="showSort">
        <image src="../../static/time.png"></image>
        <text>时间</text>
      </view>
    </view>
    <view class="content" style="height: 100%;">
      <view class="content_list">
        <!-- 藏品列表 -->
        <scroll-view
          @scrolltolower="() => updataList()"
          :scroll-y="true"
          class="content-scroll"
        >
          <view
            class="content_box"
            v-for="(res, index) in myCollections"
            @click="myCollectionsDetail(res)"
            :key="index"
          >
            <view class="content-img">
              <image :src="res.cover" mode="widthFix"></image>
            </view>
            <view class="content_text">
              <view class="name">
                {{ res.collection_name }}
              </view>
              <view class="series">
                {{ res.brand_info.brand_name }}
              </view>
              <view class="about_box">
                <view class="status">持有中</view>
                <view class="counts">序号#{{ res.serialNo }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="content_notice">
          <view class="line"></view>
          <view class="other-font">
            {{(myCollections.length == 0 ? '暂无藏品' : '没有更多了' )}}
          </view>
          <view class="line"></view>
        </view>
      </view>
    </view>
    <SortPopup ref="sort" @change="changeSort" />
    <!-- <u-popup :show="sort">
      <view class="sort-list">
        <view
          class="sort-item"
          v-for="item in sortList"
          @click="changeSort(item)"
          :key="item.value"
        >
          <view class="sort-name">{{ item.label }}</view>
          <u-icon v-if="item.value == selectSort" name="checkbox-mark"></u-icon>
        </view>
        <view class="sort-item">
          <view class="sort-name" @click="closeSort">取消</view>
        </view>
      </view>
    </u-popup> -->
  </view>
</template>

<script>
import api from '@/request/api.js'
import jWeixin from '@/node_modules/jweixin-module/lib/index.js'
import log from '@/common/login.js'
import SortPopup from '../../common/SortPopup/SortPopup.vue'
export default {
  data() {
    return {
      userInfo: {}, // 用户信息
      selectSort: 1, // 当前选择的排序
      statusBarHeight: 0,
      titleBarHeight: 0,
      screenHeight: 0,
      token: '',
      page: '1',
      myCollections: [],
      total: '',
      isCollections: false,
      ua: '',
      launch: false,
    }
  },
  mounted() {
    this.launch = true
    const url = location.href
    this.configSDK(url, {
      title: '卯时数字 - 进入我的',
      desc: '打造个人数字资产专属空间',
      link: 'https://h5.onedaen.com/pages/mine/mine',
      imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
    })
    if (!this.ua) return
    document.getElementsByClassName('uni-page-head__title')[0].style.display =
      'none'
  },
  /* 我的藏品页面默认返回到首页 */
  onUnload() {
    // uni.reLaunch({
    // 	url: 'mine',
    // })
  },
  onLoad() {
    const ua = window.navigator.userAgent.toLowerCase()
    this.ua = ua.match(/MicroMessenger/i) == 'micromessenger'
    uni.getSystemInfo({
      success: (res) => {
        this.screenHeight = res.screenHeight * (750 / res.windowWidth) //将px 转换rpx
        console.log(this.screenHeight)
      },
    })
    let userInfo = uni.getStorageSync('userInfo')
    let token = userInfo.token
    let uid = userInfo.uid
    this.userInfo = userInfo
    // 加载我的藏品需判断用户是否登录
    if (token == '') {
      /* 提示用户需要登录操作 */
      uni.showModal({
        title: '提示',
        content: '请先登录再进行操作',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击确定')
            uni.redirectTo({
              url: 'mine',
            })
          } else if (res.cancel) {
            this.getCollectionList(token, uid)
          }
        },
      })
    } else {
      this.getCollectionList(token, uid)
    }
  },
  onShow() {
    const url = location.href
    if (this.launch) {
      this.configSDK(url, {
        title: '卯时数字 - 进入我的',
        desc: '打造个人数字资产专属空间',
        link: 'https://h5.onedaen.com/pages/mine/mine',
        imgUrl: 'https://publish.onedaen.com/uploads/publicImg/shareLogo.png',
      })
    }
  },
  onPullDownRefresh() {
    this.updataList('reset')
  },
  methods: {
    /* 我的藏品详情 */
    myCollectionsDetail(item) {
      uni.navigateTo({
        url: 'My_collection_detail?id=' + item.id + '&item_id=' + item.item_id,
      })
    },
    async configSDK(url, { title, desc, link, imgUrl }) {
      // const url = `https://h5.onedaen.com/pages/details/series_detail?id=${this.id}`

      const upUrl = encodeURIComponent(url)
      api.shareData({ url: upUrl }).then((res) => {
        jWeixin.config({
          debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 必填，需要使用的 JS 接口列表
        })

        jWeixin.ready(() => {
          // 分享给朋友
          jWeixin.updateAppMessageShareData({
            title, // 分享标题
            // desc: this.activity_detail.description, // 分享描述
            desc,
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              // 设置成功
              console.log('设置成功')
            },
          })
          // 分享到朋友圈
          jWeixin.updateTimelineShareData({
            title, // 分享标题
            link: res.data.url,
            imgUrl, // 分享图标
            success: () => {
              console.log('设置成功')
              // 设置成功
            },
          })
        })
      })
    },
    getCollectionList(token, uid) {
      api
        .myCollection({
          uid: uid, //用户唯一id
          page: this.page,
          token: token,
        })
        .then((res) => {
          if (!res.data.data.length == 0 && this.page == 1) {
            this.myCollections = res.data.data
            // this.myCollections[0].cover =
            // 'https://publish.onedaen.com//uploads/material/23-01-13/167358562369193.jpg'
          } else if (!res.data.data.length == 0 && this.page > 1) {
            let more = res.data.data
            for (let i = 0; i < more.length; i++) {
              this.myCollections.push(more[i])
            }
          }
          this.total = res.data.total

          if (this.myCollections.length == 0) {
            this.isCollections = true
          }
        })
    },
    // 触底翻页
    onReachBottom() {
      this.page = this.page + 1
      /* 开始请求数据 */
      this.getCollectionList()
    },
    // 显示时间排序
    showSort() {
      this.$refs.sort.showSort()
    },

    // 切换排序
    changeSort(item) {
      this.selectSort = item.value
      this.updataList('sort')
    },
    // 刷新列表
    async updataList(reset) {
      if (this.myCollections.length < this.page * 10 && !reset) {
        uni.stopPullDownRefresh()
        return
      }
      if (!reset) {
        this.page++
      } else if (reset == 'reset') {
        this.page = 1
      }

      const data = {
        page: this.page,
        sort_type: this.selectSort,
      }
      try {
        const list = await api.myCollection(data)
        this.myCollections = reset
          ? list.data.data
          : this.myCollections.concat(list.data.data)
        this.total = list.data.total
        if (this.myCollections.length == 0) {
          this.isCollections = true
        }
        uni.stopPullDownRefresh()
      } catch (error) {
        uni.stopPullDownRefresh()
      }
    },
  },
  components: {
    SortPopup,
  },
}
</script>

<style lang="scss" scoped>
.main {
  background-color: #181816;
  min-height: 100vh;
  overflow: hidden;
}
// page {
//   background-color: #181816;
//   height: 100%;
// }

.header_nav {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .header_left {
    // min-width: 180rpx;
    // max-width: 220rpx;
    padding-right: 27rpx;
    display: flex;
    height: 60rpx;
    line-height: 60rpx;

    font-size: 26rpx;
    color: #4effff;
    background-color: rgba(128, 128, 128, 0.15);
    border-radius: 0rpx 28rpx 28rpx 0rpx;

    image {
      margin: 15rpx;
      width: 30rpx;
      height: 30rpx;
    }
  }

  .header_right {
    display: flex;
    margin-right: 20rpx;
    color: #999999;
    line-height: 60rpx;
    font-size: 26rpx;

    image {
      width: 36rpx;
      height: 36rpx;
      margin: 12rpx;
    }
  }
}

.content {
  width: 90%;
  margin: auto;
  height: fit-content;

  .content_list {
    display: flex;
    flex-direction: column;

    .content-scroll {
      // height: calc(100vh - 60rpx);
      max-height: fit-content;
      // height: calc(100vh - 60rpx);
      box-sizing: border-box;
      padding: 40rpx 0;

      .content_box {
        display: flex;
        border-radius: 20rpx;
        // height: 250rpx;
        // margin: 10rpx 0;
        margin-bottom: 20rpx;
        background-color: #242424;
        .content-img {
          width: 230rpx;
          height: 230rpx;
          max-height: 230rpx;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 20rpx 22rpx 20rpx 20rpx;
          border-radius: 20rpx;
          image {
            background-color: #ffffff;
            width: 230rpx;
            height: 230rpx;
          }
        }

        .content_text {
          display: flex;
          flex-direction: column;

          .name {
            font-family: PingFang-SC-Medium;
            font-size: 36rpx;
            line-height: 36rpx;
            letter-spacing: 0rpx;
            color: #ffffff;
            word-break: break-all;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
            // line-height: 100%;
            height: 36rpx;
          }

          .series {
            font-size: 30rpx;
            margin: 30rpx 0;
            color: #cccccc;
            font-family: PingFang-SC-Medium;
            letter-spacing: 0rpx;
            word-break: break-all;
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            line-clamp: 1;
            -webkit-box-orient: vertical;
          }

          view {
            font-family: PingFang-SC-Medium;
            color: #ffffff;
            margin-top: 30rpx;
          }

          .about_box {
            display: flex;
            margin: 0;

            .status {
              // min-width: 100rpx;
              // max-width: 180rpx;
              margin: 0;
              font-size: 24rpx;
              text-align: center;
              color: #4effff;
              border: 1px solid #4effff;
              padding: 0 15rpx;
              height: 40rpx;
              line-height: 40rpx;
            }

            .counts {
              // min-width: 100rpx;
              // max-width: 180rpx;
              margin: 0;
              font-size: 24rpx;
              text-align: center;
              color: #4effff;
              border: 1px solid #4effff;
              padding: 0 15rpx;
              height: 40rpx;
              line-height: 40rpx;
              margin-left: 22rpx;
            }

            .status,
            .counts {
              border-radius: 5px;
            }
          }

          .name {
            width: calc(685rpx / 2);
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            line-height: 36rpx;
          }
        }
      }
    }
  }

  .content_notice {
    margin: 0 auto;
    height: 36px;
    line-height: 36px;
    align-items: center;
    display: flex;

    .other-font {
      padding: 0 18rpx 0;
      color: #666666;
      font-size: 24rpx;
    }

    .line {
      height: 1.5rpx;
      width: 50rpx;
      // background: linear-gradient(to right, #181816, #4effff, #181816);
      background-image: linear-gradient(
        to right,
        rgba(245, 245, 245, 0),
        rgba(245, 245, 245, 0.6)
      );

      &:last-child {
        background-image: linear-gradient(
          to right,
          rgba(245, 245, 245, 0.6),
          rgba(245, 245, 245, 0)
        );
      }
    }
  }
}

// 排序弹窗

// ::v-deep .u-icon {
//   position: absolute;
//   right: 300rpx;
// }
</style>
